<script setup>
const props = defineProps({
    hotList:Array
})
</script>

<template>
  <view class="hot">
    <view class="hot-items" v-for="item in  hotList" :key="item.id">
      <view class="text">
        <view class="item-text1">{{ item.title }}</view>
        <view class="item-text2">{{ item.alt }}</view>
      </view>
      <view class="image-cards">
        <image
          :src="item.pictures[0]"
          class="image"
          mode="scaleToFill"
        />
        <image
            :src="item.pictures[1]"
            mode="scaleToFill"
            class="image"
        />
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.hot{
    display: flex;
    flex-wrap: wrap;
    min-height: 520rpx;
    margin: 10rpx 20rpx 0;
    border-radius: 10rpx;
    background-color: #fff;
    .hot-items{
        width: 49%;
        height: 254rpx;
        display: flex;
        flex-direction: column;
        border-right: 1rpx solid #eee;
        border-top:1rpx solid #eee;
        &:nth-child(2n){
            border-right:0 none ;
        }
        &:nth-child(-n+2){
            border-right:0 none ;
        }
        .text{
            justify-content: start;
            display: flex;
            align-items: center;
            padding: 24rpx 24rpx 0;
            font-size: 32rpx;
            color: #262626;
            .item-text2{
                font-size: 24rpx;
                color: #7f7f7f;
                padding-left:24rpx ;
                margin-left: 24 rpx;
            }
        }
        .image-cards{
            flex:1;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            .image{
            width: 150rpx;
            height: 150rpx;
            }

        }
        

    }
}

</style>
